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The What? 


Immediate Mode Graphical User Interface 
(as opposed to “retained mode”) 


printf(“Are you sure? [y/N] *); 
fflush(stdout); 


if (toupper(getch()) == 'Y”) 
exit(0); 


“My First GUI” 


Button 


FillRect(50, 50, 100, 30); 
DrawText(80, 55, “Quit”); 


if (mouseButtonDown ¿68 
mx >= 50 4€ mx <= 150 4 
my >= 50 46€ my <= 80) 
exit(0); 


“My First GUI” 


Slider 


FillRect(80, 20, 100, 5); 
x = 80 + position * 100; 
DrawLine(80 + x, 15, 80 + x, 30); 


if (mouseButtonDown ¿68 
mx >= 80 46€ mx <= 180 4: 
my >= 15 46€ my <= 30) 
position = (mx - 80) / 100; 


That Was Simple, But... 


* Doesn't behave like proper Ul components 
e So you typically have a system with... 


- component hierarchy, lifetime management, data 
synchronization, event handler (loop), event 
listeners, layouters, rendering, ... and so on ... 


* Usage isn't much easier than complexity of the 
system itself 


* GUl development turned into a “retained” 
model 


small IMGUl example.. 


if (button(GEN_ID, 15, 15, “Quit”) 
Í 
exit(0); 


Anatomy of a button 


bool button(int id, int x, int y, char *text) 


( 


// Check whether the button should be hot 
if (mouselnsideRectangle(x, y, strlen(text) * 8 + 16, 48)) 


( 
uiState.hotltem = id; 
if (uiState.activeltem == O €: uiState.mouseDown) 
uiState.activeltem = id; 


j 
... // Render button 


/ / 1f button is hot and active, but mouse button is not 
/ / down, the user must have clicked the button. 


if (uiState.mouseDown == 0 4. 
uiState.hotltem == id «4 
uiState.activeltem == id) return true; 


return false; // Otherwise, no clicky. 


Are you hot or not? 


Hot Not Hot 


Active 


Not 
Active N 


ulState 


bool button(int id, int x, int y, char *text) 


( 


// Check whether the button should be hot 
if (mouselnsideRectangle(x, y, strlen(text) * 8 + 16, 48)) 
( 
uiState.hotltem = id; 
if (uiState.activeltem == O €é uiState.mouseDown) 
uiState.activeltem = id; 


j 
... // Render button 


// If button is hot and active, but mouse button is not 
// down, the user must have clicked the button. 
if (uiState.mouseDown == 0 €4: 

uiState.hotltem == id 4:48 

uiState.activeltem == id) return true; 


return false; // Otherwise, no clicky. 


Ul State (simple case) 


struct UlState 
¡ 
Int mousex:; 
int mouseyY: 
int mouseDown; 


int hotltem:; 
int activeltem:; 


y 


uiState; 


void beginGUI() 
- Clear hotltem 


void endGUI(O 
- Clear activeltem 
(if needed) 


1d 


bool button(int id, int x, int y, char *text) 


( 


// Check whether the button should be hot 
if (mouselnsideRectangle(x, y, strlen(text) * 8 + 16, 48)) 


( 
uiState.hotltem = id; 
if (uiState.activeltem == O €:é. uiState.mouseDown) 
uiState.activeltem = id; 
j 


... /// Render button 


// If button is hot and active, but mouse button is not 
// down, the user must have clicked the button. 


if (uiState.mouseDown == 0 €é 
uiState.hotltem == id 4. 
uiState.activeltem == id) return true; 


return false; // Otherwise, no clicky. 


GEN_ID 


* |Ds must be unique for all active widgets 

e Many solutions 
= LINE 
- Widget's rectangle 
- Incrementing variable 
- Etc. 

e All solutions have good and bad sides 

* Keep It Simple, Stupid! 


The good.. 


No object creation 

No cleanup either 

No queries for information 

No message passing 

Data owned by application, not the widget 


Everything is “immediate” - one call per 
widget, each frame, handles behavior and 
rendering. 


. the bad.. 


e Requires different kind of thinking 
e Wastes CPU time 


- But in games youre re-rendering stuff 50+ fps 
anyway. . 


* Ul generated from code; No designer-friendly 
tools. 


- Unless you make some... 


.. and the ugly. 


e While making easy things dead easy, makes 
complicated things very complicated. 


- The Ul system internals may become even more 
complex than in “traditional” GUI library! 


e Ul logic interleaved to rendering 
- Can be overcome by more complex internals. 


e Pretty “anti-OOP” (although this is debatable) 


e Not a silver bullet. 


Case Studies 


e IMGUI with J2ME 


- Habbo Animator, yet to be released project by 
Sulake Corporation 


- Works on wide set of J2ME devices with very 
limited resources 


e IMGUI with PS3 
- Super Stardust'" HD - created by Housemarque 


- For PLAYSTATIONO3 


e Available now in PlayStation Network 


Case: IMGUI with J2ME 


e Scales dynamically from tiny to big resolutions 


— All resolutions supported by the same build 


Case: IMGUI with J2ME 


e Key-based actions 
- Key presses saved to a ring buffer 
e Screen €t focus managing by framework 
- Application screens have an enumerated type 


* Focus remembered for each screen type 


- Focus reset when entering screen, but recalled 
when returning to it 


- Likewise component types are enumerated 


* Some data saved per type, e.g. scroll position 


Case: IMGUI with J2ME 


e List-based Ul component 


- listBegin(listid, ...), ES 
listButton(listid, index, ...), ..., 
listEnd(listid, ittemCount, ...) 


- Draw customizations after 
calling listButton 


- Handles all pending movements from key buffer 
e Better usability on very slow devices where FPS is lower 
- Draws arrows to indicate scrolling possibility 


e In listEnd(), as itemCount is then known 


Case: IMGUI with J2ME 


e Scroll panels 


- Given rectangle, font and text... 


e Text printed with word wrapping, 
also amount of rows counted 
for the scrolling arrows 
- Amount of visible rows in the 
rectangle is reduced with lower 
resolutions 


HELP: UNDO 


action. However, undo only 
works on one action and you 
shouldn*t count on it too much. 
A few times I've made a 
mistake in real life and thought 
”Control-2” ... it didn*t work, 1 
still had made a mistake! 


Press the keys 1-9 to find out 
more about the actions or H to 
see general help. 


Case: IMGUI with J2ME 


e Multi-tap text input 


- Manages the key tap timeouts, 
current key and char index 


AMmatordooo 


SAVE ANIMATION 


Enter animation name 


- Component given a text editing temp 
array and characters for each key 
* Other things 


- Timed out pop-ups for notifications 


e lf key is pressed, it is consumed and popup is dismissed 


- Shortcut support for menus (expert mode) 


Case: IMGUI| with J2ME 


e Post mortem observations 


- Implementation of the framework 
was slightly harder than previous 
non-IMGUI one 


AMRMator doo 


* Both had same design constraints 


- IMGUI a bit easier for new screens 


e Clearly better for dynamic stuff 


— No significant difference in memory 
usage compared to previous system 


« Probably slightly less separate objects overall 


Case: IMGUI with PS3 - SSHD 
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Case: IMGUI with PS3 - SSHD 


* Designers define Ul using locators 
- Position, size, text alignment, custom attributes 
- Explicit id defined for each component 

* Rendering separated from Ul logic 
- Visual update animates screens (also enter/leave) 
- Logic update is the actual IMGUI code 


e Uses locator id to identify components 


- Structurally mostly static screens 


Case: IMGUI with PS3 - SSHD 
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Extra Altributes 
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SHOOT ASTERDIOS FOR TOHENS 
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Other Cases 


e Cinnamon Beats 
- In Assembly'07 game development compo. :-) 

e Zero Memory Widget library 
- Whitepaper and first implementation from 2003 

* Boom! Boom! Driller E 
- Asm06 game 


e Musagl 


- music editor and 
synthesizer with 
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fairly complex Ul Es Pp 


More info 


http://iki.fi/sol/imgui/ 
- Tutorial, different widgets, keyboard use etc. 


http://www.mollyrocket.com/video/imgui.avi 
- The original video lecture 


https://mollyrocket.com/forums/viewforum.php?f=10 
- original IMGUI forums 


Game Developer magazine, September 2005, Volume 12, Number 8, Pages 
34-36 


http://www710.univ-lyon1.fr/-exco/ZMW/ 
- Zero Memory Widget library 


http://www. cyd.liu.se/-tompe573/hp/ 
- Musagi 


Backup Slide: 


Decoupling Logic and Visual Look 


* Button as an example 
- Define a ButtonStyle class 
e Defines isinside() and render() methods 
e Inherit and create a custom one 


- E.g. ImageButtonStyle which takes in an image for 
each button state (on/off for hot and active) 


- Give pointer to the ButtonStyle object in the 
button(...) call 


Backup Slide: 


From Prototype Version to Final 


* One idea to make it easier to move from quick 
prototype to the fine-tuned final version: 


- Create hard-coded Ul (positions etc.) with each 
component having an textual id as well 


- Support loading of Ul screen definition files 


- If the file has a component definition for a given 
textual id, it overrides the hard-coded values 


